<template>
	<view class="news-item-com">
		<view class="item0" v-if="item.includeVideo == 1">
			<view class="title">{{item.contentTitle}}</view>
			<view class="image-list">
				<u-image v-for="pic in getPics(item.pagePic, 1)" border-radius="6" :src="pic" width="650rpx"
					height="350rpx" class="image" :key="pic">
					<u-loading slot="loading" mode="circle"></u-loading>
					<u-icon name="photo" slot="error"></u-icon>
				</u-image>
				<view class="mask">
					<image src="@/static/images/play_white.png"></image>
				</view>
			</view>
			<view class="bottom-box">
				<view class="tag-list">
					<view class="tag-item" v-for="tag in item.labelArrayList" :key="tag">{{tag}}</view>
				</view>
				<view class="time-box">
					<u-icon color="#999999" size="22" name="clock"></u-icon>
					<view class="text">{{parseTime(item.createTime)}}</view>
				</view>
			</view>
		</view>
		<!-- 一张图左右布局 -->
		<view class="item1" v-else-if="item.pageStyle == 1">
			<u-image v-for="pic in getPics(item.pagePic, 2)" border-radius="6" :src="pic" width="156rpx" height="138rpx"
				class="image" :key="pic">
				<u-loading slot="loading" mode="circle"></u-loading>
			</u-image>
			<view class="right-box">
				<view class="title">{{item.contentTitle}}</view>
				<view class="tag-list">
					<view class="tag-item" v-for="tag in item.labelArrayList" :key="tag">{{tag}}</view>
				</view>
				<view class="time-box">
					<u-icon color="#999999" size="22" name="clock"></u-icon>
					<view class="text">{{parseTime(item.createTime)}}</view>
				</view>
			</view>
		</view>
		<!-- 三张图布局 -->
		<view class="item2" v-else-if="item.pageStyle == 2">
			<view class="title">{{item.contentTitle}}</view>
			<view class="image-list">
				<u-image v-for="pic in getPics(item.pagePic, 3)" border-radius="6" :src="pic" width="198rpx"
					height="138rpx" class="image" :key="pic">
					<u-loading slot="loading" mode="circle"></u-loading>
				</u-image>
			</view>
			<view class="bottom-box">
				<view class="tag-list">
					<view class="tag-item" v-for="tag in item.labelArrayList" :key="tag">{{tag}}</view>
				</view>
				<view class="time-box">
					<u-icon color="#999999" size="22" name="clock"></u-icon>
					<view class="text">{{parseTime(item.createTime)}}</view>
				</view>
			</view>
		</view>
		<!-- 长图布局 -->
		<view class="item3" v-else>
			<view class="title">{{item.contentTitle}}</view>
			<view class="image-list">
				<u-image v-for="pic in getPics(item.pagePic, 4)" border-radius="6" :src="pic" width="650rpx"
					height="255rpx" class="image" :key="pic">
					<u-loading slot="loading" mode="circle"></u-loading>
				</u-image>
			</view>
			<view class="bottom-box">
				<view class="tag-list">
					<view class="tag-item" v-for="tag in item.labelArrayList" :key="tag">{{tag}}</view>
				</view>
				<view class="time-box">
					<u-icon color="#999999" size="22" name="clock"></u-icon>
					<view class="text">{{parseTime(item.createTime)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "news-item",
		props: {
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			getPics(picString, flag) {
				let pics = [];
				if (picString) {
					pics = JSON.parse(picString)
				}
				let num = 1;
				let defaultPic = '1111';
				if (flag == 1) { // 视频
					defaultPic = '/static/images/news-item/video.png'
				} else if (flag == 2) { // 1图
					defaultPic = '/static/images/news-item/1.png'
				} else if (flag == 3) { // 三图
					num = 3;
					defaultPic = '/static/images/news-item/3.png'
				} else { // 长图
					defaultPic = '/static/images/news-item/chang.png'
				}
				let xhcs = num - pics.length; // 循环次数
				for (let i = 0; i < xhcs; i++) {
					pics.push(defaultPic)
				}
				return pics;

			},
			parseTime(time) {
				let ms = new Date(time).getTime();
				return uni.$u.date(ms, 'yyyy-mm-dd')
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
